import { Box, Button, CircularProgress } from '@mui/material'
import * as Colors from '@brightlayer-ui/colors'; // 伊顿颜色

const MyLoadingButton = ({children, isLoading, onClick}) => {

  const thisOnClick = (event) => {
    if (onClick && typeof (onClick) === 'function') {
      onClick(event)
    }
  }

  return (
    <Box style={{position: 'relative'}}>
      <Button variant="contained" disabled={isLoading} onClick={(event) => thisOnClick(event)}>
        {isLoading ?
          <CircularProgress
          size={18}
          sx={{
            color: Colors.gray['400'],
            position: 'absolute',
            top: '50%',
            left: '50%',
            marginTop: '-9px',
            marginLeft: '-9px'
          }}
        /> :
        undefined}
        <div style={{whiteSpace: 'nowrap'}}>
          {children}
        </div>
      </Button>
    </Box>
  )
}

export default MyLoadingButton